<template>
  <div>
    <myDivider name="车辆详情"></myDivider>
    <el-page-header @back="$router.go(-1)">
    </el-page-header>
    <div class="wholePage">
      <!-- 详情 -->
      <el-form ref="detailForm" :model="detailForm" label-width="100px"
        style="width: 1000px;margin-left: 50px;margin-bottom: 50px;">
        <el-row>
          <el-col :span="8">
            <el-form-item label="车牌号:">
              <el-input size="small" v-model="detailForm.licensePlateNumber" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="品牌型号:">
              <el-input size="small" v-model="detailForm.brandModel" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车型:">
              <el-input size="small" v-model="detailForm.carType" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="车辆颜色:">
              <el-input size="small" v-model="detailForm.carColor" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车主姓名:">
              <el-input size="small" v-model="detailForm.name" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号码:">
              <el-input size="small" v-model="detailForm.phoneNumber" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="创建时间:">
              <el-input size="small" v-model="detailForm.updateTime" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆照片:">
              <el-image style="width: 100px; height: 100px" :src="detailForm.carImageUrl" :preview-src-list="[detailForm.carImageUrl]">
              </el-image>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="detailForm.pictureUrl && userData.unitType =='system'" label="行驶证照片:">
              <el-image style="width: 100px; height: 100px" :src="detailForm.pictureUrl" :preview-src-list="[detailForm.pictureUrl]">
              </el-image>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <!-- 详情结束 -->
    </div>
    <el-divider></el-divider>
    <el-tabs type="border-card" v-model="tabsType">
      <el-tab-pane label="关联社区" name="community">
        <el-table :data="communityData" style="width: 100%">
          <el-table-column align="center" prop="areaName" label="地区">
          </el-table-column>
          <el-table-column align="center" prop="name" label="小区名称">
          </el-table-column>
          <el-table-column align="center" prop="code" label="车位号">
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="绑定时间">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detailForm: {},
      tabsType: 'community',
      communityData: [],
      userData:{}
    }
  },
  activated() {
    this.userData = JSON.parse(sessionStorage.getItem('logOnUser'))
    this.getDetail()
    this.getCommunity()
  },
  methods: {
    async getDetail() {
      let res = await this.$api.car.myCarManageDetail(this.$route.query.id)
      if (res.code == 200) {
        console.log(res.data, '详情');
        this.detailForm = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    async getCommunity() {
      let res = await this.$api.car.myGetSpaceListByCarId(this.$route.query.id)
      if (res.code == 200) {
       this.communityData = res.data
      } else {
        this.$message.error(res.message)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.wholePage {
  margin: 20px 0;

  /deep/ .el-form-item {
    margin: 0;
  }
}
</style>